<template>
    <h1>{{ username }}</h1>
    <h1>{{ count }}</h1>
    <h1>{{ arr }}</h1>
    <button @click="reset">点击重置</button>
    <button @click="update">点击修改</button>
</template>

<script setup>
// 直接引用store就可以了
import { useUser } from '../store/users'
import { storeToRefs } from 'pinia'

// 解构state,解构会丢失响应性,使用storeToRefs来保持响应性
let userStore = useUser()

let { username, count, arr} = storeToRefs(userStore)
console.log(userStore);

// 修改pinia的状态3种方法 1.直接修改 2.$patch 3.action

// 1.state状态可以直接更改,同时修改多个状态的时候,性能比较低
setTimeout(() => {
    // userStore.username = 'hmm'
    username.value = 'zs'
    // count++
    // arr.push(10)
}, 2000);

// 2.使用$patch来修改状态,这种方法可以提高性能
// 这种写法对于复杂的类型来说,数据不好处理,因为添加一个新的数据的时候,需要把原来的数据和新的数据合并,比较麻烦
let update = () => {
    // userStore.$patch({
    //     username: 'xxxx' + count.value,
    //     count: count.value + 1,
    //     arr: [...arr.value, 111]
    // })

    // $patch优化的使用方式,这里可以直接传函数
    userStore.$patch((state) => {
        state.username = 'efsf',
            state.count = state.count + 10,
            state.arr.push(state.count)
    })
}

// 重置状态
let reset = () => {
    userStore.$reset()
}

// 订阅变化
userStore.$subscribe((mutation, state) => {
    console.log(state);
    console.log('mutation', mutation);

})
</script>